@layer components {
  .DescriptionList {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: --spacing(3);
  }

  .DescriptionListItem {
    position: relative;

    @media (--xs) {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 3;
      align-items: start;
    }
  }

  .DescriptionTerm {
    @apply text-md;
    @apply font-semibold;
    letter-spacing: -0.00625em;
    color: var(--color-foreground);
    white-space: nowrap;
    word-break: keep-all;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: --spacing(1);

    @media (--xs) {
      @apply text-sm;
      font-weight: revert-layer;
      color: revert-layer;
      margin-bottom: 0;
    }

    &.separator {
      &::before {
        content: '';
        box-shadow: inset 0 1px 0 0 var(--color-gray-200);
        position: absolute;
        top: 0;
        inset-inline: 0.75rem 1rem;
        height: 1px;
      }

      @media (--xs) {
        &::before {
          height: 0;
        }
      }
    }
  }

  .DescriptionListDetails {
    @apply text-sm;
    color: var(--color-foreground);
    grid-column: span 2;
  }

  .DescriptionListInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding-inline: 0.75rem;
    width: 100%;
    gap: --spacing(3);

    [data-rehype-pretty-code-figure] {
      margin: 0;
      max-width: 100%;
    }

    .separator & {
      padding-top: --spacing(2);
    }

    @media (--xs) {
      min-height: 2.5rem;

      &,
      .separator & {
        padding: 0.625rem 0.75rem;
      }
    }
  }
}
